<template>
	<div class="catalogue">
		<div class="catalogue-content">
			<div class="catalogue-content-box classify">
				<h3>热门文章</h3>
				<div class="box-button" v-for="item in hotArticle" :key="item.id" @click="goToArticle(item.id)">
					<span>{{ item.title }}</span>
				</div>
			</div>
			<div class="catalogue-content-box article">
				<h3>最新文章</h3>
				<div class="box-button" v-for="item in newArticle" :key="item.id" @click="goToArticle(item.id)">
					<span>{{ item.title }}</span>
				</div>
			</div>
			<div class="catalogue-content-box reply">
				<h3>最近回复</h3>
				<div class="box-button" v-for="item in newComment" :key="item.id" @click="goToArticle(item.articleID)">
					<span>
						{{ item.name }}: <span>{{ item.text }}</span>
					</span>
				</div>
			</div>
			<div class="catalogue-content-box">
				<h3>搜索文章</h3>
				<el-input
					v-model="search"
					size="large"
					placeholder="搜索"
					:prefix-icon="Search"
				/>
				<el-button type="primary" size="large" plain style="margin-top: 1rem;" @click="searchArticle">搜索吧！</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';
import { getArticle_hot, getArticle_new, getComment_new } from '../api/api';
import { useStore } from '../stores';

// 热门文章
const hotArticle = ref([])
// 最新文章
const newArticle = ref([])
// 最新评论
const newComment = ref([])

// 根据路由判断是否为用户界面
// 是用户界面则请求该用户的数据
const userID = ref(null)
const route = useRoute()
if (route.path === '/user') {
	if (route.query?.userid) {
		userID.value = route.query?.userid
	} else {
		const store = useStore()
		userID.value = store.id
	}
}

// 获取最热门三篇文章
getArticle_hot(3, userID.value).then(response => {
	hotArticle.value = response.data
}).catch(error => console.log(error))
// 获取最新三篇文章
getArticle_new(3, userID.value).then(response => {
	newArticle.value = response.data
}).catch(error => console.log(error))
// 获取最新三条评论
getComment_new(3, userID.value).then(response => {
	newComment.value = response.data
}).catch(error => console.log(error))

// 使用路由跳转文章
const router = useRouter()
// 根据articleID转跳文章
const goToArticle = (articleID) => {
	router.push({name: 'article', query: {article: articleID}})
}

// 搜索框内容
const search = ref('')
// 搜索文章
const searchArticle = () => {
	router.push({name: 'select', query: {search: search.value}})
}
</script>

<style scoped>
.catalogue {
	min-height: 200px;
	height: max-content;
	width: 100%;
	padding: 4rem 0;
	background-color: #fff;
}
.catalogue-content {
	height: 100%;
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	flex-direction: row;
}
.catalogue-content-box {
	height: max-content;
	min-height: 200px;
	max-width: 25%;
	flex: 0 0 25%;
	padding: 0 15px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.catalogue-content-box > h3 {
	margin: 0;
	padding: 0;
	margin-bottom: 2rem;
	font-size: 1.75rem;
	line-height: 1.3;
	font-family: inherit;
	font-weight: 400;
	color: #32325d;
}
.box-button {
	width: 100%;
	height: fit-content;
	min-height: 3.5rem;
	background-color: #409EFF;
	color: #fff;
	border-radius: .25rem;
	padding: .5rem 2rem;
	border: .0625rem solid transparent;
	display: flex;
	justify-content: center; /* 水平居中 */
	align-items: center;     /* 垂直居中 */
}
.box-button:hover {
	cursor: pointer;
}
.box-button > span {
	font-size: 1rem;
	font-weight: 500;
}
.box-button > span > span {
	font-size: 0.9rem;
	font-weight: 200;
}
.box-button+.box-button {
	margin: .8rem 0 0 0;
}
.classify > div {
	border-color: #4fd69c;
	background-color: #4fd69c;
}
.article > div {
	border-color: #37d5f2;
	background-color: #37d5f2;
}
.reply > div {
	border-color: #fc7c5f;
	background-color: #fc7c5f;
}
</style>